<template>
	<view class="goods-item">
		<view class="left-goods-item">
			<radio class="radio" :checked="goods.goods_state" color="#fd6666" v-if="showRadio" @click="radioClickHandler"></radio>
			<image :src="goods.goods_small_logo || defaultPic" class="goods-img"></image>
		</view>
		
		<view class="rignt-goods-item">
			<view class="goods-name">{{goods.goods_name}}</view>
			<!--管道符-->
			<view class="goods-info-box">
				<view class="goods-price">￥{{goods.goods_price | toFixed}}</view>
				<uni-number-box @change="bindChange" v-model="goods.goods_count" v-if="showNumbox"></uni-number-box>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-goods",
		
		data() {
			return {
				// 默认的图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			};
		},
		
		//过滤器，保留两位小数
		filters: {
			toFixed(num) {
				return Number(num).toFixed(2)
			}
		},

		props:{
			goods: {
				type: Object,
				default:{}
			},
			
			showRadio: {
				type: Boolean,
				default: false
			},
			
			showNumbox: {
				type: Boolean,
				default: false
			}
		},
		
		methods: {
			radioClickHandler() {
				this.$emit('radio-change', {
				  goods_id: this.goods.goods_id,
				  goods_state: !this.goods.goods_state
				})
			},
			
			bindChange(count) {
				this.$emit('num-change', {
					goods_id: this.goods.goods_id,
					
					//强制转换为number
					//goods_count: +count,
					goods_count: Number(count)
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.goods-item {
		display: flex;
		//ps:侧滑列表的时候，防止局部显示不全，所以写死width
		width: 750rpx;
		//元素的总高度和宽度包含内边距和边框(padding 与 border) :
		//box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
		box-sizing: border-box;
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #f0f0f0;
	}
	
.left-goods-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 5px;
	
	.goods-img{
		width: 100px;
		height: 100px;
		//此元素将显示为块级元素，此元素前后会带有换行符。
		display: block;
	}
}

.rignt-goods-item {
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1; //填充满可用空间
	
	.goods-name {
		font-size: 13px;
	}
	
	.goods-info-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.goods-price {
			color: #C00000;
			font-size: 16px;
		}
	}
	
	
}

</style>
